<script setup lang="ts">
import {useStore} from "@/composables/store";

const nav = useStore.useHeaderNav()

const state = reactive({
  navList: [
    {
      title: '首页',
      link: '/',
      value: '/'
    },
    {
      title: '关于我们',
      link: '/about',
      value: 'about'
    },
    {
      title: '产品服务',
      link: '/product',
      value: 'product'
    },
    {
      title: '作品案例',
      link: '/works',
      value: 'works',
    },
    {
      title: '团队成员',
      link: '/team',
      value: 'team'
    },
    {
      title: '新闻动态',
      link: '/news',
      value: 'news'
    },
    {
      title: '联系我们',
      link: '/contact',
      value: 'contact'
    }
  ],
});
const currentPath = ref('');
const router = useRouter();
const route = useRoute();
const Sc = () => {
  transparent.value = !document.documentElement.scrollTop
}
onMounted(() => {
  currentPath.value = location.pathname;
  window.addEventListener('scroll', Sc)
})

onUnmounted(() => {
  window.removeEventListener('scroll', Sc)
})

router.afterEach((to: { path: string }) => {
  currentPath.value = to.path;
});
const transparent = ref(true)

</script>

<template>
  <div class="news-header" :class="{transparent}">
    <NuxtLink to="/" class="logo">
      <img class="black-logo" src="~/assets/logo-black.png" alt="">
      <img class="white-logo" src="~/assets/logo.png" alt="">
    </NuxtLink>
    <nav>
      <div class="nav-item" :class="currentPath===item.link?'active':''" v-for="(item,index) in state.navList"
           :key="index">
        <NuxtLink :to="item.link">
          <span class="item-box">
            {{ item.title }}
          </span>
        </NuxtLink>
      </div>
    </nav>
  </div>
</template>

<style scoped lang="scss">
.news-header {
  padding: 0.41rem 1.7rem 0 1.63rem;
  display: flex;
  height: 1.55rem;
  background: #FFFFFF;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 24rem;
  z-index: 9;
  transition: 0.5s;

  &.transparent {
    background: transparent;

    .logo {
      .black-logo {
        display: none;
      }

      .white-logo {
        display: block;
      }
    }

    nav {
      .nav-item {
        a .item-box {
          color: #fff;
        }
      }
    }
  }

  .logo {
    img {
      width: 2.61rem;
      height: 0.79rem;
    }

    .black-logo {
      display: block;
    }

    .white-logo {
      display: none;
    }
  }

  nav {
    display: flex;
    align-items: center;

    .nav-item {
      height: 100%;
      margin-right: 0.665rem;

      &:first-child {
        margin-right: 0.84rem;
      }

      &:last-child {
        margin-right: 0;
      }

      &.active {
        a {
          font-weight: 500;

          .item-box {

            &::before {
              opacity: 1;
            }
          }
        }
      }

      a {
        display: block;
        position: relative;
        font-size: 0.275rem;
        font-weight: 400;
        line-height: 0.64rem;

        .item-box {
          color: #000;

          &::before {
            transition: .4s;
            opacity: 0;
            content: "";
            position: absolute;
            top: 50%;
            left: -0.23rem;
            width: 0.07rem;
            height: 0.26rem;
            background: #0A77B4;
            transform: translateY(-45%) skew(337deg);
          }

          &:hover {
            &::before {
              opacity: 1;
            }
          }

        }

        &:hover {
          font-weight: 500;
        }
      }

    }

  }
}
</style>
